<template>
  <view
    class="content"
    @touchmove.stop.prevent
    catchtouchmove
    @touch.stop.prevent>
    <scroll-view
      @touchmove.stop.prevent
      @touch.stop.prevent
      class="scroll-view"
      scroll-y
      style="height: calc(100vh - 40px)"
      refresher-enabled="true"
      refresher-background="#f6f6f6"
      :refresher-threshold="50"
      @scrolltolower.stop="onScrollToLower"
      @refresherrefresh.stop="onRefresh"
      :refresher-triggered="triggered">
      <view style="padding: 0 20rpx">
        <view
          class="uni-margin-wrap"
          style="margin-bottom: 20rpx; width: 710rpx; height: 376rpx">
          <swiper
            class="swiper"
            indicator-color="rgba(255, 255, 255, 0.5)"
            indicator-active-color="rgba(255, 255, 255, 1)"
            style="width: 710rpx; height: 376rpx; border-radius: 16rpx"
            circular
            :indicator-dots="swiperList.length > 1"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration">
            <swiper-item
              v-for="item in swiperList"
              :key="item.id"
              style="border-radius: 16rpx; width: 710rpx; height: 376rpx">
              <view
                class="swiper-item"
                style="">
                <image
                  :src="item.imgUrl"
                  style="
                    border-radius: 16rpx;
                    width: 710rpx;
                    height: 376rpx;
                  "></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="msg_content">
          <image
            src="../../static/index/Frame.png"
            style="width: 74rpx; height: 42rpx; margin-right: 20rpx"
            alt="" />
          <view class="msg">
            <view class="msgTxt">
              {{ msg }}
            </view>
          </view>
        </view>
        <view style="padding: 20rpx; color: #000; font-size: 32rpx"
          >{{ $tokenName }}走势</view
        >
        <view
          class="echarts_content"
          id="echartsContent">
          <l-echart ref="chart"></l-echart>
        </view>
        <view class="goodsList">
          <view
            class="title"
            style="margin-bottom: 10rpx"
            >兑换商品</view
          >
          <GoodsList ref="goodList"></GoodsList>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import { getSwiper, getEchartsData, getMsg } from '@/apis/first'
  import * as echarts from 'echarts/core'
  import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    DataZoomComponent,
    MarkPointComponent
  } from 'echarts/components'
  import { LineChart } from 'echarts/charts'
  import { UniversalTransition } from 'echarts/features'
  import { CanvasRenderer } from 'echarts/renderers'
  import { VisualMapComponent } from 'echarts/components'
  import { parseTime3 } from '@/utils'
  import GoodsList from './components/GoodsList'
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    DataZoomComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
    VisualMapComponent,
    MarkPointComponent
  ])
  export default {
    data() {
      return {
        title: 'Hello',
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        swiperList: [],
        msg: '',
        tokenDateList: [],
        tokenList: [],
        tokenPriceArr: [],
        farmerCommodityList: [],
        triggered: false,
        storeId: '',
        userInfo: {}
      }
    },
    components: {
      GoodsList
    },
    onLoad() {
      this.getSwiper()
      this.getEchartsData()
      this.getMsg()
    },
    async onShow() {},
    methods: {
      async getSwiper() {
        const res = await getSwiper()
        if (res.code === 200) {
          this.swiperList = res.data.list
          console.log(this.swiperList, 'list')
        } else {
          console.log(res)
        }
      },
      init(option) {
        this.$refs.chart.init(echarts, (chart) => {
          chart.setOption(option)
        })
      },
      async getEchartsData() {
        const res = await getEchartsData()
        if (res.code === 200) {
          this.tokenList = res.data.list
          console.log(this.tokenList, 'tokenList')
          this.tokenPriceArr = this.tokenList.map((item) => {
            return item.tokenPrice
          })
          this.tokenDateList = this.tokenList.map((item) => {
            return parseTime3(item.tokenDate)
          })
          let tokenPriceArr = []
          let tokenDate = []
          for (let i = 0; i < 7; i++) {
            tokenDate.push(this.tokenDateList[i])
            tokenPriceArr.push(this.tokenPriceArr[i])
          }
          tokenDate = tokenDate.reverse()
          tokenPriceArr = tokenPriceArr.reverse()
          console.log(tokenPriceArr, tokenDate)
          let option = {
            title: {
              text: '单位:元',
              left: '2%', // 标题位置
              textStyle: {
                fontSize: 10, // 标题大小
                color: '#999'
              }
            },
            grid: {
              //设置图表四周留白间距
              top: '16%',
              right: '3%',
              bottom: '16%',
              left: '10%'
            },
            xAxis: {
              show: true,
              type: 'category',
              boundaryGap: true, //设置x轴两边的留白
              axisTick: {
                //x轴刻度尺
                show: false
              },
              axisLine: {
                //x轴线条颜色
                lineStyle: {
                  color: '#eee',
                  type: 'dashed',
                  width: 1
                }
              },
              data: tokenDate,
              data: [
                {
                  value: tokenDate[0],
                  // 突出周一
                  textStyle: {
                    // fontSize: 20,
                    color: '#999999'
                  }
                },

                {
                  value: tokenDate[1],
                  textStyle: {
                    color: '#999999'
                  }
                },
                {
                  value: tokenDate[2],
                  textStyle: {
                    color: '#999999'
                  }
                },
                {
                  value: tokenDate[3],
                  textStyle: {
                    color: '#999999'
                  }
                },
                {
                  value: tokenDate[4],
                  textStyle: {
                    color: '#999999'
                  }
                },
                {
                  value: tokenDate[5],
                  textStyle: {
                    color: '#999999'
                  }
                },
                {
                  value: tokenDate[6],
                  textStyle: {
                    color: '#999999'
                  }
                }
              ]
              // "splitArea": { "show": true, "areaStyle": { "color": ["#447b86"] } }
            },

            yAxis: {
              type: 'value',
              max: 0.1, //最大刻度值
              interval: 0.02, //刻度值间隔值
              splitLine: {
                //网格线
                show: true, //关闭网格线
                // 或者
                lineStyle: {
                  type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                  color: '#EEEEEE'
                }
              },
              axisLine: {
                //y轴线条颜色
                show: false,
                lineStyle: {
                  color: '#999',
                  width: 1
                }
              }
            },
            series: [
              {
                data: tokenPriceArr,
                type: 'line',
                // markPoint: {
                //   data: [{ type: 'max', name: '最大值' }],
                //   symbol: 'roundRect',
                //   symbolOffset: [0, '-70%'],
                //   symbolSize: 32,
                //   label: {
                //     show: true, //开启显示
                //     color: '#fff'
                //   }
                // },
                smooth: true,
                color: '#3E70FF',
                // smooth: true,//面积图改成弧形状
                lineStyle: {
                  width: 2, //外边线宽度
                  color: '#3E70FF' //外边线颜色
                },
                showSymbol: false, //去除面积图节点圆
                areaStyle: {
                  //区域填充渐变颜色
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(62, 112, 255, 0.32)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(62, 112, 255, 0)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
                markLine: {
                  silent: true,
                  lineStyle: {
                    color: '#999'
                  },
                  data: [
                    {
                      yAxis: 0.02
                    },
                    {
                      yAxis: 0.04
                    },
                    {
                      yAxis: 0.06
                    },
                    {
                      yAxis: 0.08
                    },
                    {
                      yAxis: 0.1
                    }
                  ]
                }
                // markPoint: {
                //   data: [{ type: 'max', name: '最大值' }],
                //   symbol: 'roundRect',
                //   symbolOffset: [0, -25],
                //   symbolSize: 39
                // }
              }
            ]
          }
          this.init(option)

          // console.log(this.tokenPriceArr, 'tokenPriceArr')
        } else {
          // console.log(res)/
          // uni.utils.toast(res.message)
        }
      },
      async getMsg() {
        const res = await getMsg()
        if (res.code === 200) {
          const data = res.data
          console.log('msg:', data)
          this.msg = data.content
        } else {
          console.log(111111)
        }
      },
      async onScrollToLower() {
        await this.$refs.goodList.getFarmerCommodityList()
      },
      async onRefresh() {
        this.triggered = true
        this.getSwiper()
        this.getMsg()
        this.getEchartsData()
        // 必须要在请求结束后才结束下拉的动画
        await this.$refs.goodList.getFarmerCommodityList(true)
        this.triggered = false
      }
    }
  }
</script>

<style lang="scss">
  .content {
    background-color: #f6f6f6;
    padding-top: 20rpx;
  }
  .msg_content {
    display: flex;
    box-sizing: border-box;
    padding: 20rpx 40rpx;
    height: 92rpx;
    background: #ffffff;
    vertical-align: middle;
    border-radius: 16rpx;
  }
  .msg {
    border-left: 1px solid #eeeeee;
    box-sizing: border-box;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    font-size: 14px;
    padding-left: 20rpx;
    overflow: hidden;
    padding-left: 20rpx;
    .msgTxt {
      height: 52rpx;
      line-height: 52rpx;
      font-size: 14px;
      width: 100%;
      animation: music 6s linear 0.2s infinite;
    }
    @keyframes music {
      0% {
        transform: translate3d(80%, 0, 0);
      }
      100% {
        transform: translate3d(-80%, 0, 0);
      }
    }
  }
  .echarts_content {
    height: 504rpx;
    padding-left: 20rpx;
    padding-top: 40rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }
</style>
